<template>
  <div v-loading="iswraploading" class="prossececontainer">
    <el-dialog
      title="请给出预警信息"
      :visible.sync="isDialogShow"
      width="30%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        clearable
        v-model="textareavalue"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="resetwarning(warningid)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <div class="selectHeader">
      <div class="select-wrapper">
        <div class="selectBox">
          <div class="selectTitle">
            <i class="iconfont icon-sousuo" />按条件查询
          </div>

          <div style="display: flex; align-items: center; margin-top: 10px">
            <el-input
              v-model="listquery.nickName"
              clearable
              placeholder="编制单位名称"
              style="width: 200px; margin-right: 10px"
            ></el-input>

            <el-input
              v-model="listquery.village"
              clearable
              placeholder="村庄名称"
              style="width: 200px; margin-right: 10px"
            ></el-input>

            <el-select
              v-model="listquery.tssx"
              clearable
              style="width: 200px; margin-right: 10px"
              placeholder="提升时序"
            >
              <el-option
                v-for="(item, index) in years"
                :label="item.label"
                :value="item.value"
                :key="index"
              >
              </el-option>
            </el-select>
            <el-button type="success" icon="el-icon-search" @click="search"
              >搜索</el-button
            >
            <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </div>

          <div style="margin-top: 10px">
            <span style="color: #4778c7">规划编制类型:</span>
            <el-radio-group
              size="small"
              v-model="listquery.planType"
              @change="valueChange"
            >
              <el-radio-button border label="">全部</el-radio-button>
              <el-radio-button
                border
                v-for="(item, index) in options2"
                :key="index"
                :label="item"
                >{{ item }}</el-radio-button
              >
            </el-radio-group>
          </div>

          <div style="margin-top: 10px">
            <span style="color: #4778c7">阶段进度选择：</span>
            <el-radio-group
              v-model="listquery.progressName"
              size="small"
              @change="valueChange"
            >
              <el-radio-button label="" border>全部</el-radio-button>
              <el-radio-button label="准备工作" border
                >准备工作</el-radio-button
              >
              <el-radio-button label="基础调查" border
                >基础调查</el-radio-button
              >
              <el-radio-button label="编制方案" border
                >编制方案</el-radio-button
              >
              <el-radio-button label="咨询论证" border
                >咨询论证</el-radio-button
              >
              <el-radio-button label="审查审核" border
                >审查审核</el-radio-button
              >
              <el-radio-button label="审批公告" border
                >审批公告</el-radio-button
              >
            </el-radio-group>
          </div>
          <!-- <div style="margin-top: 10px">
            <span style="color: #4778c7">是否合并编制:</span>
            <el-radio-group
              size="small"
              v-model="listquery.isMerge"
              @change="valueChange"
            >
              <el-radio-button border label="true">合并</el-radio-button>
              <el-radio-button border label="false">不合并</el-radio-button>
            </el-radio-group>
          </div> -->
          <div class="row-area" style="margin-top: 10px">
            <span style="color: #4778c7">行政区域选择：</span>
            <el-select
              placeholder="所属市选择"
              v-model="currentLiindex"
              @change="cityChange"
              v-if="iscityshow"
              clearable
              @clear="cityclear"
            >
              <el-option
                v-for="(item, index) in citylist"
                :key="item.id"
                :label="item.label"
                :value="index"
              />
            </el-select>
            <ul class="countryArea" v-if="areaShow">
              <li
                v-for="(item, i) in cityChildren"
                :key="i"
                @click="liChange(i)"
                :class="{ areaActive: i == currentareaindex }"
              >
                {{ item.label }}
              </li>
            </ul>
            <el-select
              placeholder="乡镇选择"
              v-model="town"
              @change="townChange"
              v-if="istownshow"
              clearable
            >
              <el-option
                v-for="item in townlist"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <div v-loading="isloading">
      <div class="header">
        <div><i class="el-icon-d-arrow-right"></i>进度信息列表</div>

        <div style="display: flex; align-items: center">
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            @click="operationconditionvillageexcel2"
            v-if="role == '超级管理员' || role == '自然资源厅用户'"
            >导出统计报表</el-button
          >
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            @click="operationconditionvillageexcelxq"
            v-if="role == '超级管理员' || role == '自然资源厅用户'"
            >导出详情报表</el-button
          >
          <!-- <el-button plain type="success" icon="el-icon-download" @click="countdownload" v-if="role == '超级管理员' || role == '自然资源厅用户'">进度导出</el-button> -->

          <!-- <el-button type="primary" icon="el-icon-download" @click="storageWrite" v-if="role == '超级管理员' || role == '湖南省第三测绘院'">批量入库</el-button> -->
        </div>
        <!-- <div v-if="role == '区县用户' || role == '市州用户'" style="display: flex; align-items: center">
                <el-button style="margin-right: 10px" type="success" plain icon="el-icon-download" @click="operationconditionvillageexcel">导出excel</el-button>
                <el-upload class="upload-demo" action="" :http-request="unitLinkmore" :show-file-list="false" accept=".zip">
                    <el-button type="success" plain icon="el-icon-link" style="margin-right: 10px">市县会议上传</el-button>
                </el-upload>
                <el-button type="success" plain icon="el-icon-edit" @click="writeLink">一张图对接填报</el-button>
            </div> -->
      </div>
      <div class="totalmessage">
        <span v-if="changetssx()">{{ this.listquery.tjyear }}年度</span
        ><span v-if="this.listquery.city != ''">{{ this.listquery.city }}</span
        ><span v-if="this.listquery.country != ''">{{
          this.listquery.country
        }}</span
        ><span v-if="this.listquery.town != ''">{{ this.listquery.town }}</span
        >共有<span>{{ total }}</span
        >个村庄
      </div>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :default-expand-all="isExpand"
        @expand-change="expand"
      >
        <el-table-column label="序号" width="100" prop="id">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属行政区划" width="250">
          　<template slot-scope="scope">
            <span
              >{{ scope.row.city }}-{{ scope.row.country }}-{{
                scope.row.town
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="village" label="村庄名" width="150" />
        <el-table-column prop="planType" label="编制方式" width="200" />
        <el-table-column label="阶段完成进度[阶段当前年度截止日期]">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            prop=""
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div
                @click="openstate(scope.row.id, item)"
                :class="[
                  scope.row.progressNames[item] ? 'active' : 'noclick',
                  'progressli',
                ]"
              >
                <el-progress
                  :percentage="scope.row.progressNames[item]"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="" label="一张图对接" width="160">
                    <template slot-scope="scope">
                        <ul class="onemapul">
                            <li :class="
                      scope.row.inputStateVo && scope.row.inputStateVo.inputState
                        ? 'activeli'
                        : ''
                    ">
                                入库
                            </li>
                            <li :class="
                      scope.row.inputStateVo && scope.row.inputStateVo.cityState
                        ? 'activeli'
                        : ''
                    ">
                                填报
                            </li>
                        </ul>
                    </template>
                </el-table-column> -->
        </el-table-column>

        <el-table-column prop="nickName" label="编制单位" width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.nickName.length > 0" class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.nickName"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
            <span v-else>暂未被编制</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactNamePhone"
          label="联系人+电话"
          width="250"
        >
          <template slot-scope="scope">
            <div class="zhuanhang">
              <el-tag
                v-for="(item, index) in scope.row.contactNamePhone"
                :key="index"
                style="margin-right: 5px"
                >{{ item }}</el-tag
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="mssTssx" label="提升时序" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.mssTssx.tssx2023 == '√'">2023</span>
            <span v-if="scope.row.mssTssx.tssx2024 == '√'">2024</span>
          </template>
        </el-table-column>
      </el-table>
      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :fileList="fileList"
        :title="title"
      ></right-div>

      <el-dialog
        title="请选择是否入库填报"
        :visible.sync="isWriteVisible"
        width="550px"
        :append-to-body="true"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="150px"
          label-position="left"
        >
          <el-form-item label="行政区划选择:" prop="villageIds">
            <el-cascader
              style="width: 300px"
              v-model="form.villageIds"
              :options="citylist"
              :props="props"
              size="medium"
              placeholder="请选择行政区划"
              clearable
              collapse-tags
              :show-all-levels="false"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否入库填报:" prop="inputState">
            <el-radio v-model="form.inputState" label="true">是</el-radio>
            <el-radio v-model="form.inputState" label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="入库时间:" prop="inputDate">
            <el-date-picker
              v-model="form.inputDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 300px"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isWriteVisible = false">取 消</el-button>
          <el-button type="primary" @click="isStorageWrite('form')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>


<script>
import tableHeader from "./components/TableHeader";
import {
  getoperationconditionvillage,
  getoperationconditionvillageexcelledger,
  getoperationconditioneveryvillagetz,
  setinputstates,
} from "@/api/notice.js";
import { progresslistcount, villagewarning } from "@/api/index.js";
import { tzprogresslistcount } from "@/api/uprecord.js";
import { uploadfirstzip } from "@/api/notice.js";
import rightDiv from "@/views/unitIndex/components/rightDiv";
import queryMixin from "@/mixins/countquery.js";
import { getTownList, getAllVillageList } from "@/api/country.js";
import { mapGetters } from "vuex";
export default {
  components: {
    tableHeader,
    rightDiv,
  },
  computed: {
    ...mapGetters(["citylist"]),
  },
  mixins: [queryMixin],

  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        tssx: "",
        city: "",
        country: "",
        town: "",
        village: "",
        progressName: "",
        subProgressTitle: "",
        isMerge: false,
        planType: "",
        tjyear: "",
      },

      form: {
        villageIds: [],
        inputState: false,
        inputDate: null,
      },
      rules: {
        villageIds: [
          {
            required: true,
            message: "请选择区域",
            trigger: "blur",
          },
        ],
        inputState: [
          {
            required: true,
            message: "请选择是否入库",
            trigger: "blur",
          },
        ],
        inputDate: [
          {
            required: true,
            message: "请选择入库时间",
            trigger: "blur",
          },
        ],
      },
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        multiple: true,
      },
      isWriteVisible: false,
      rateArr: [
        "准备工作",
        "基础调查",
        "编制方案",
        "咨询论证",
        "审查审核",
        "审批公告",
      ],
      options2: ["合并编制", "单独编制"],
      isDialogShow: false,
      isloading: false,
      total: 0,
      title: "",
      warningid: "",
      textareavalue: "",
      valueData: "",
      rightPanelShow: false,
      iswraploading: false,
      nowuserarea: "",
      resultList: [],
      fileList: [],
      isExpand: false,
      //行政区划选择
      role: "",
      filterShow: true,
      form: {},
      AAA: {},
      tableData: [],
      years: [
        { label: "2023", value: "tssxa" },
        { label: "2024", value: "tssxb" },
      ],
    };
  },
  mounted() {
    this.AAA = new Map();
    this.role = this.$store.getters.user.roles[0].name;
    this.nowuserarea = this.$store.getters.user.area;
    let v = false;
    this.getdata();
  },
  methods: {
    search() {
      this.listquery.currentPage = 1;
      this.listquery.pageSize = 10;
      this.getdata();
    },
    reset() {
      this.listquery = {
        pageSize: 10,
        currentPage: 1,
        nickName: "",
        tssx: "",
        village: "",
        isMerge: false,
      };
    },
    expand(data, row) {
      data.state = row;
      this.AAA.set(data.id, row);
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 2) {
        if (row.children && row.state) {
          return {
            rowspan: row.children.length + 1,
            colspan: 1,
          };
        } else if (row.isChildren) {
          return {
            rowspan: 1,
            colspan: 0,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },
    //懒加载
    lazyLoad(node, resolve) {
      let level = node.level;
      if (level == 2) {
        let country = node.label;
        let city = node.parent.label;
        getTownList({
          city: city,
          country: country,
        }).then((res) => {
          let nodes = [];
          let promiseArrary = [];
          res.data.map((v, i) => {
            let n = {
              id: i,
              label: v,
              value: v,
              children: [],
            };
            let promise = getAllVillageList({
              city: city,
              country: country,
              town: v,
            }).then((response) => {
              return response;
            });
            promiseArrary.push(promise);
            nodes.push(n);
          });
          Promise.all(promiseArrary).then((dataArr) => {
            nodes.forEach((v, i) => {
              let data = dataArr[i];
              v.children = data.data.map((item, index) => {
                return {
                  id: index,
                  label: item[1],
                  value: item[0],
                  leaf: true,
                };
              });
            });
            resolve(nodes);
          });
        });
      } else {
        resolve(node);
      }
    },
    //批量入库
    storageWrite() {
      this.form = {
        villageIds: [],
        inputState: false,
        inputDate: null,
      };
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
      this.isWriteVisible = true;
    },
    handleChange() {},
    //确定入库
    isStorageWrite(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const temp = Object.assign({}, this.form);
          let villageIds = this.form.villageIds.map((v) => {
            return v[3];
          });
          temp.villageIds = villageIds.toString();
          setinputstates(temp)
            .then((v) => {
              this.$notify({
                title: "成功",
                message: v.message,
                type: "success",
              });
              this.isWriteVisible = false;
            })
            .catch((e) => {
              this.$message.error(e.response.data.message);
            });
        } else {
          console.log("提交失败");
          return false;
        }
      });
    },
    //进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#0000CD";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },

    // operationconditionvillageexcel() {
    //   this.isloading = true;
    //   let year = "";
    //   switch (this.listquery.tssx) {
    //     case "tssxa":
    //       {
    //         year = 2023;
    //       }
    //       break;
    //     case "tssxb":
    //       {
    //         year = 2024;
    //       }
    //       break;
    //     default:
    //       break;
    //   }
    //   getoperationconditionvillageexcel(year).then(
    //     (v) => {
    //       const blob = new Blob([v], {
    //         type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
    //       });
    //       const link = document.createElement("a"); //创建a标签
    //       link.download = "镇村一体工作进度情况统计表.xlsx"; //a标签添加属性
    //       link.style.display = "none";
    //       link.href = URL.createObjectURL(blob);
    //       document.body.appendChild(link);
    //       link.click(); //执行下载
    //       URL.revokeObjectURL(link.href); //释放url
    //       document.body.removeChild(link); //释放标签
    //       this.isloading = false;
    //     }
    //   );
    // },
    operationconditionvillageexcel2() {
      this.isloading = true;
      let year = "";
      switch (this.listquery.tssx) {
        case "tssxa":
          {
            year = 2023;
          }
          break;
        case "tssxb":
          {
            year = 2024;
          }
          break;
        default:
          break;
      }
      getoperationconditionvillageexcelledger(year).then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "普通村庄质量提升进度情况表.xlsx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    changetssx() {
      if (this.listquery.tssx != "") {
        switch (this.listquery.tssx) {
          case "tssxa":
            {
              this.listquery.tjyear = 2023;
              console.log(this.listquery.tjyear);
            }
            break;
          case "tssxb":
            {
              this.listquery.tjyear = 2024;
              console.log(this.listquery.tjyear);
            }
            break;
          default:
            break;
        }
      }
    },

    operationconditionvillageexcelxq() {
      this.isloading = true;
      let year = "";
      switch (this.listquery.tssx) {
        case "tssxa":
          {
            year = 2023;
          }
          break;
        case "tssxb":
          {
            year = 2024;
          }
          break;
        default:
          break;
      }
      getoperationconditioneveryvillagetz(year).then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "全省村庄规划工作进度情况详情表.xlsx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    writeLink() {
      alert("111");
    },
    format(percentage) {
      return `${percentage}%`;
    },

    resetwarning(id) {
      let query = {
        id: id,
        warning: this.textareavalue,
      };
      villagewarning(query).then((v) => {
        if (v == "OK") {
          this.$notify({
            title: "成功",
            message: "预警信息已下发给编制单位！",
            type: "success",
          });
          this.isDialogShow = false;
          this.getdata();
        } else {
          this.$notify.error({
            title: "错误",
            message: "发生错误",
          });
        }
      });
    },
    query(id) {
      this.$router.push("/stage/stageCount");
    },

    openstate(id, name) {
      this.title = name;
      this.rightPanelShow = true;
      this.resultList = [];
      this.tableData.forEach((element) => {
        if (
          element.id == id &&
          element.progressList != "" &&
          element.progressList[name]
        ) {
          let objv = element.progressList[name].content;
          if (objv) {
            objv.forEach((v, i) => {
              let imgslist = objv[i].files;
              // let recordlist = objv[i].record;
              let treelist = [];
              let treelist1 = [];
              if (imgslist) {
                imgslist.forEach((element) => {
                  let label = element.substring(element.lastIndexOf("/") + 1);
                  let obj = {
                    label: label,
                    url: element,
                  };
                  treelist.push(obj);
                });
              }
              objv[i].Imglist = treelist;
              this.resultList.push(objv[i]);
            });
          }
        }
      });
    },
    countdownload() {
      this.isloading = true;
      getoperationconditionvillage().then((v) => {
        const blob = new Blob([v], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
        });
        const link = document.createElement("a"); //创建a标签
        link.download = "辖区规划编制进度统计情况.docx"; //a标签添加属性
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
        this.isloading = false;
      });
    },
    closeRightPane() {
      this.rightPanelShow = false;
    },
    openWarn(id) {
      this.warningid = id;
      this.isDialogShow = true;
    },
    unitLinkmore(data) {
      let file = data.file;
      let name = file.name;
      let fileType = name.split(".")[name.split(".").length - 1];
      if (fileType != "zip") {
        this.$message.error("仅支持zip文件");
        return;
      }
      let datafile = new FormData();

      datafile.append("file", file);
      this.isloading = true;
      uploadfirstzip(datafile)
        .then((res) => {
          if (res.success) {
            this.isloading = false;
            this.getdata();
            this.$notify({
              title: "成功",
              message: "导入成功",
              type: "success",
              offset: 0,
            });
          } else {
            this.$notify.error({
              title: "导入失败",
              message: res.message,
            });
          }
        })
        .catch((e) => {
          this.$message.error(e.response.data.message);
        });
    },
    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      this.isloading = true;
      let res = await tzprogresslistcount(this.listquery);
      res.data.content.forEach((v) => {
        v.progressNames.forEach((p) => {
          v.progressNames[p.name] = p.count;
        });
      });
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.tableData.forEach((element) => {
        if (element.children) {
          if (this.AAA.has(element.id)) {
            element.state = this.AAA.get(element.id);
          } else {
            element.state = this.isExpand;
          }
        }
      });
      this.AAA = new Map();
      this.isloading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../public/css/table.scss";

// @import "../../../../public/css/countheader.scss";
.selectTitle {
  color: #4778c7;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}

.totalmessage {
  padding: 10px 0px;
  margin-right: 20px;
  border-top: 1px dashed #ccc;
  font-size: 24px;
  color: #4778c7;
}

.onemapul li {
  float: left;
  border: 1px solid #4778c7;
  padding: 1px 19px;
  margin-right: 3px;
}

.onemapul .activeli {
  background-color: #4778c7;
  color: #fff;
  font-weight: 700;
}

::v-deep .el-progress-bar__outer {
  height: 15px !important;
}

::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}

.rightbutton {
  display: flex;
}

.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .el-progress {
    width: 130px;
  }

  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}

.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}

.noclick {
  pointer-events: none !important;
}

.zhuanhang {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prossececontainer {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

.row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 35px;
  margin-right: 5px;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #4778c7;

  i {
    color: #4778c7;
  }
}

.icondiv {
  display: flex;
  justify-content: center;

  span {
    //  background-color: #f2f2f2;
    display: inline-block;
    padding: 5px 5px;
    margin: 0 auto;
    font-size: 12px;
    color: #4778c7;
  }
}

.label-title {
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  vertical-align: middle;
  padding: 0 12px 0 0;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: 700;
}

.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }

  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}

.jieduanul {
  list-style: none;
  margin: 0;
  padding: 5px 0px;
  width: 100%;
  display: flex;
  justify-content: center;

  li {
    float: left;
    margin-right: 35px;
    height: 30px;
    font-size: 10px;
    border-radius: 3px;
    padding: 5px 25px;
    background-color: #fff;
    border: 1px solid #4778c7;
    cursor: pointer;
  }

  .active {
    background-color: #4778c7;
    color: #fff;
  }

  .noclick {
    pointer-events: none;
  }
}

::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}

.warn {
  background-color: #cd5555;
  cursor: pointer;
}

// ::v-deep .lastaaa .el-input__inner {
//   height: 32px;
//   width: 45%;
// }
::v-deep .el-table {
  position: relative;
}
</style>
